<script setup>
import {defineComponent, ref} from "vue";
import CommonIcon from "@/components/CommonIcon.vue";
import {ElMessageBox} from "element-plus";
import {deleteLine} from "@/api/line.js";
import {message} from "ant-design-vue";
import {deleteCard} from "@/api/card.js";
import CardDetailDialog from "@/views/task/components/CardDetailDialog.vue";
import {useTaskStore} from "@/stores/index.js";
import {getCardBgStyle} from "@/utils/colorUtils.js";
const emit = defineEmits(['delSuccess'])
defineComponent({
  name: "TaskCard",
});
const props = defineProps({
  card: { type: Object },
});
const bgColor = getCardBgStyle()
const currentOpt = ref(null);
const taskStore = useTaskStore();
const cardDetailRef = ref(null)
const openDetail = () => {
  // taskStore.setCardInfo(props.card);
  cardDetailRef.value.open(props.card)
}
const handleDelCard = () => {
  ElMessageBox.confirm("是否确认删除该卡片？",
      "Warning",
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
    const params = {id: props.card.id}
    let res = await deleteCard(params)

    if (res.code === 200) {
      message.success("删除成功")
      emit("delSuccess")
    }
  }).catch()
      .finally(() => {
        delTaskId.value = null
      })
}
</script>

<template>
  <div class="item-container pointer" :style="bgColor" @click="openDetail" @mouseenter="currentOpt = props.card.id" @mouseleave="currentOpt = null">
    <span style="font-weight: 500">{{ props.card.cardName }}</span>
    <div class="close-icon" v-show="currentOpt">
      <common-icon @click.stop="handleDelCard"></common-icon>
    </div>
    <card-detail-dialog ref="cardDetailRef"></card-detail-dialog>
  </div>
</template>

<style scoped lang="less">
.item-container {
  width: 100%;
  min-height: 100px;
  padding: 10px 10px;
  //text-wrap: none;
  word-wrap: break-word;
  border-radius: 6px;
  //background: linear-gradient(to bottom,#CAD9FA, #E1E8F9);
  margin-bottom: 10px;
  position: relative;
  .close-icon {
    position: absolute;
    right: 10px;
    top: 10px;
  }
}
</style>
